<template>
    <div class="classesAdd">
        <pageTitle :title="title"/>
        <div class="line"></div>

        <div class="classesTypeChoose">
            <div class="classesFont">班次类型</div>

            <div class="mb-2 ml-4">
                <el-radio-group v-model="classesChoose">
                    <el-radio value="1" size="large" >固定班次</el-radio>
                    <el-radio value="2" size="large" >弹性班次</el-radio>
                </el-radio-group>
            </div>
        </div>

        <div class="classesName">
            <div>班次名称</div>
            <el-input v-model="input" style="width: 340px" placeholder="请输入" />
        </div>

        <div class="AttendanceResponsibilityPeople">
            <div>考勤组负责人</div>
            <el-button link type="primary" @click="AddClassessTime">+添加上下班时间</el-button>
        </div>
       
        <div v-if="classesChoose == 1">
           <div class="FirstCommuteToworkFlex">
                <div class="FirstCommuteToworkFlexContenct">第一次上下班</div>
           </div>

            <div class="CommutingSettings-out">
                <div class="CommutingSettings-in">

                </div>
            </div>
        </div>
        <div v-else-if="classesChoose == 2">
            这是第二个组件
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import pageTitle from "@/components/pageTitle/pageTitle.vue";
const title = '新增班次'

//单选框选中的value，用来切换组件的
const classesChoose = ref('1')

//班次输入名称值
const input = ref('')

const AddClassessTime = () => {
    console.log(111);
}

onMounted(() => {
    console.log(classesChoose.value);
})
</script>

<style lang="less" scoped>
.classesAdd {
    padding: 20px;
    background-color: #fff;

    .line{
        width: 100%;
        height: 2px;
        background-color: grey;
        margin-top: 20px;
    };

    .classesTypeChoose{
        display: flex;
        align-items: center;
        width: 300px;
        justify-content: space-around;
        margin-top: 30px;

        .classesFont{
            color: gray;
            font-size: 12px;
        } 
    }

    .classesName{
        width: 26.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: gray;
        font-size: 0.75rem;
        margin-left: 1.0625rem;
        margin-top: 1.875rem;
    }

    .AttendanceResponsibilityPeople{
        display: flex;
        color: gray;
        font-size: 0.75rem;
        width: 197px;
        justify-content: space-between;
        margin-left: 15px;
        margin-top: 30px;
    }

    .FirstCommuteToworkFlex{
        width: 31.25rem;
        height: 5rem;
        background-color: rgb(180, 180, 199);
        display: flex;
        border-radius: 10px 10px 0 0;
        justify-content: center;
        text-align: center;
        line-height: 80px;

        .FirstCommuteToworkFlexContenct{
            border-bottom: 0.0625rem dashed red;
            width: 28.75rem;
            height: 5rem;
            position: relative;
        }
    }

    .CommutingSettings-out{
        width: 31.25rem;
        height: 12rem;
        background-color: rgb(180, 180, 199);
        display: flex;
        justify-content: center;

        .CommutingSettings-in{
            width: 28.75rem;
            height: 12rem;
            background-color: rgb(180, 180, 199);
        }
    }
} 
</style>